<template>
    <div class="pt-menu">
        <pt-menu-item v-for="(item, idx) in menu" :key="idx" :item="item" />
    </div>
</template>

<script>
import { getLastMenuId, pushMenu } from "./menuManager";

export default {
    name: "PtMenu",
    props: {
        menu: {
            type: Array,
            required: true
        },

        parent: Object
    },

    data () {
        return {
            id: getLastMenuId()
        }
    },

    created () {
        pushMenu(this);
    }
}
</script>

<style lang="scss">
@import "../../assets/scss/_const.scss";

.pt-menu {
    position: relative;
    z-index: $menuZIndex;    
    min-width: 180px;
    padding: {
        top: 5px;
        bottom: 5px;
    }

    border: solid 1px var(--borderColor);
    background-color: var(--backgroundColor);
    box-shadow: 2px 2px 3px 1px rgba(0, 0, 0, .2);
}
</style>